import { Image, List } from 'antd';
import React, { useEffect, useState } from 'react';
import './index.less'
export default () => {
    const [screens, setScreens] = useState<any[]>([]);

    useEffect(() => {
        if (!window.nodeUtils) return
        const { desktopCapturer } = window.nodeUtils
        desktopCapturer
            .getSources({ types: ['window', 'screen'], thumbnailSize: { width: 720, height: 480 } })
            .then(async (sources: any) => {
                console.log(sources);
                setScreens(sources);
            });
    }, []);

    const getStream = async (source: any) => {
        const stream = await (navigator.mediaDevices as any).getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    chromeMediaSourceId: source.id,
                    minWidth: 1280,
                    maxWidth: 1280,
                    minHeight: 720,
                    maxHeight: 720,
                },
            },
        });
        console.log(stream)
        const video = document.getElementById('video') as HTMLVideoElement
        video.srcObject = stream
    };

    return (
        <section className="desktop-capture">
            <List
                dataSource={screens}
                grid={{
                    column: 4,
                    gutter: 1,
                }}
                renderItem={(item) => (
                    <Image width="120px" height="120px" src={item.thumbnail.toDataURL()} onClick={() => getStream(item)} />
                )}
            ></List>
            <video id="video" width="720" height="480" autoPlay controls />
        </section>
    );
};
